<template>
    <el-dialog id="nav-user" title="用户中心" :visible.sync="showUserCenter" @click.native.stop>
        <el-tabs v-model="curTab"  >
            <el-tab-pane  label="我的信息" name="myInfo" key="myInfo">
                <myInfo></myInfo>
            </el-tab-pane>
            <el-tab-pane  label="我的头像" name="myPhoto" key="myPhoto">
                <myPhoto @updatePhoto="updatePhoto"></myPhoto>
            </el-tab-pane>
            <el-tab-pane  label="修改密码" name="changePsw" key="changePsw">
                <changePsw @closeDialog="showUserCenter=false"></changePsw>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
<script>
import myInfo from './my-info'
import myPhoto from './my-photo'
import changePsw from './change-psw'
export default {
    components:{myInfo,myPhoto,changePsw},
    data(){
        return{
            showUserCenter:false,
            curTab:'myInfo',
        }
    },
    watch:{
        showUserCenter(newVal){
            if(newVal && !this.getTab){
                this.getInfo()
            }
        }
    },
    methods:{
        getInfo(){
            var submitData={type:'info_type'}
            var _this=this
            this.$http.getDictByType(submitData)
            .then((res)=>{
                var data=res.data.data
                if(!data){return}
                //_this.tabList.concat(data)
                data.forEach(item => {
                   // _this.tabList.push(item)
                });
                _this.getTab=true
            }).catch((err)=>{
                throw(err)
            })
        },

        updatePhoto(src){
            this.$emit("updatePhoto",src)
        }


    },
    created(){
        
    }
}
</script>
<style lang="scss" scoped>
#nav-user{
    cursor: default;
    /deep/ .el-dialog{
        height: 70%;
        width: 40%;
        display: flex;
        flex-direction: column;
        .el-dialog__header{
        }
        .el-dialog__body{
            flex:1;
            padding-top: 0;
            overflow: hidden;
        }
    }

    /deep/ .el-tabs{
        height: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__header{
            .el-tabs__active-bar{
                background-color:#fff;
            }
            .el-tabs__nav-wrap::after{
                background-color:#2f5484;
            }
        }
        .el-tabs__content{
            flex:1;
            overflow: auto;
            .el-tab-pane{
                height: 100%;
                overflow: auto;
            }
        }
    }

}
</style>


